<!-- eslint-disable vue/valid-v-slot -->
<template>
  <a-table
    :data="tablists"
    :pagination="false"
    :loading="tableLoad"
    :stripe="(tableStriped as boolean)"
    :row-key="rowKey"
    :bordered="{ wrapper: true, cell: tableBordered }"
    :scroll="{ x: 1500 }"
    :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
  >
    <template #columns>
      <a-table-column
        v-for="item of tableColumns.list"
        :key="item.key"
        align="left"
        :width="item.width"
        :title="(item.title as string)"
        :data-index="(item.key as string)"
      >
        <!-- <template v-if="item.key === 'total'" #cell="{ record }">
          <a-space>
            <a-button size="small" type="text" class="butten" @click="detail(record.id, '')">
              {{ record.total }} 张
            </a-button>
          </a-space>
        </template> -->

        <template v-if="item.key === 'success'" #cell="{ record }">
          <a-space>
            <a-button size="small" type="text" class="butten" @click="detail(record.id, true)">
              {{ record.success }} 张
            </a-button>
          </a-space>
        </template>
        <template v-if="item.key === 'remarks'" #cell="{ record }">
          <span v-if="record.remarks">{{ record.remarks }}</span>
          <span v-else>- - -</span>
        </template>
      </a-table-column>
    </template>
  </a-table>
  <a-modal v-model:visible="visible" width="35%" hide-cancel>
    <template #title> 查看详情 </template>
    <div>
      <a-space>
        <a-button type="outline" status="warning" :loading="loadings" @click="exportExcelList">
          <template #icon>
            <icon-send />
          </template>
          <!-- Use the default slot to avoid extra spaces -->
          <template #default>导出</template>
        </a-button>
      </a-space>
      <a-table
        style="margin-top: 20px"
        :bordered="{ wrapper: true, cell: tableBordered }"
        :stripe="(tableStriped as boolean)"
        :loading="cardLoading"
        :data="cardList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        :columns="tableColumns.cardList"
        table-layout-fixed
        hide-expand-button-on-empty
        :default-expand-all-rows="true"
        :scroll="{ x: 1000 }"
      >
        <template #columns>
          <a-table-column
            v-for="item of tableColumns.cardList"
            :key="item.key"
            :align="item.align"
            :title="(item.title as string)"
            :width="item.width"
            :data-index="(item.key as string)"
            :fixed="item.fixed"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'userName'" #cell="{ record }">
              <span
                style="width: 177px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
                v-if="record.userName"
                >{{ record.userName }}</span
              >
              <span v-else>- - - - </span>
            </template>
            <template v-if="item.key === 'operatorUserName'" #cell="{ record }">
              <span>上级</span>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter ref="tableFooterRef" :pagination="paginations" />
    </div>
    <template #footer>
      <a-space />
    </template>
  </a-modal>
</template>

<script lang="ts">
  import { useRowKey, useTable, usePagination } from '@/hooks/table'
  import { defineComponent, reactive, ref, toRef, watch } from 'vue'
  import { get } from '@/api/http'
  import useCommonStore from '@/store/modules/common'

  export default defineComponent({
    name: 'CardChildren',
    props: {
      tablist: {
        type: Array,
        require: true,
      },
      load: {
        type: Boolean,
        require: true,
      },
      bordered: {
        type: Boolean,
        require: true,
      },
      striped: {
        type: Boolean,
        require: true,
      },
      url: {
        type: String,
        require: true,
      },
      exportUrl: {
        type: String,
        require: true,
      },
      exportName: {
        type: String,
        require: true,
      },
    },
    emits: ['list'],
    setup(props, { emit }) {
      const scroll = {
        x: 1500,
      }
      const tempTableProps = toRef(props, 'tablist')
      const tempTablePropsLoad = toRef(props, 'load')
      const tempTablePropsBordered = toRef(props, 'bordered')
      const tempTablePropsStriped = toRef(props, 'striped')
      const tempTablePropsUrl = toRef(props, 'url')
      const tempTablePropsExportUrl = toRef(props, 'exportUrl')
      const tempTablePropsExportName = toRef(props, 'exportName')
      const rowKey = useRowKey('id')
      const table = useTable()
      const tableLoad = ref(true)
      const loadings = ref(false)
      const tableBordered = ref(false)
      const tableStriped = ref(false)
      const urls = ref()
      const exportUrls = ref()
      const exportNames = ref()
      const cardList: any = ref([])
      const cardLoading = ref(false)
      const paginations = usePagination(cardListFn)
      const id = ref()
      const success = ref()
      const visible = ref(false)
      const userCommon = useCommonStore()

      const tablists: any = ref([
        {
          id: 3,
          name: '测试',
        },
      ])
      const tableColumns: any = reactive({
        list: [
          // {
          //   title: '操作账号',
          //   key: 'operatorUserName',
          //   dataIndex: 'operatorUserName',
          //   align: 'center',
          //   checked: true,
          //   width: 205,
          // },
          // {
          //   title: '被操作账号',
          //   key: 'userName',
          //   dataIndex: 'userName',
          //   align: 'center',
          //   checked: true,
          //   width: 205,
          // },
          // {
          //   title: '操作数量',
          //   key: 'total',
          //   dataIndex: 'total',
          //   align: 'center',
          //   checked: true,
          //   width: 205,
          // },
          {
            title: '成功数量',
            key: 'success',
            dataIndex: 'success',
            align: 'center',
            checked: true,
            width: 205,
          },
          // {
          //   title: '失败数量',
          //   key: 'error',
          //   dataIndex: 'error',
          //   align: 'center',
          //   checked: true,
          //   width: 205,
          // },
          {
            title: '备注信息',
            key: 'remarks',
            dataIndex: 'remarks',
            align: 'center',
            checked: true,
            width: 276,
          },
          {
            title: '操作时间',
            key: 'createTime',
            dataIndex: 'createTime',
            align: 'center',
            checked: true,
            width: 190,
          },
        ],
        cardList: [
          {
            title: '显示卡号',
            key: 'card',
            dataIndex: 'card',
            align: 'center',
            checked: true,
            width: 120,
          },
          {
            title: 'ICCID',
            key: 'iccid',
            dataIndex: 'iccid',
            align: 'center',
            checked: true,
            width: 120,
          },
          // {
          //   title: '旧客户账号',
          //   key: 'userName',
          //   dataIndex: 'userName',
          //   align: 'center',
          //   checked: true,
          //   width: 120,
          // },
        ],
      })

      const exportExcelList = () => {
        loadings.value = true
        userCommon
          .downLoads(
            exportUrls.value,
            { parentId: id.value, success: success.value },
            exportNames.value
          )
          .then(() => {
            loadings.value = false
          })
          .catch(() => {
            loadings.value = false
          })
      }
      function cardListFn() {
        cardLoading.value = true
        get({
          url: urls.value,
          data: {
            parentId: id.value,
            success: success.value,
            page: paginations.page,
            size: paginations.pageSize,
          },
        }).then((res) => {
          cardLoading.value = false
          cardList.value = res.data.list
          paginations.setTotalSize((res.data as any).totalSize)
          return res
        })
      }

      const detail = async (val: any, val1: any) => {
        paginations.page = 1
        await (cardList.value = [])
        await (id.value = val)
        await (success.value = val1)
        await cardListFn()
        await (visible.value = true)
      }

      watch(
        [
          () => tempTablePropsLoad.value,
          () => tempTableProps.value,
          () => tempTablePropsBordered.value,
          () => tempTablePropsStriped.value,
          () => tempTablePropsUrl.value,
          () => tempTablePropsExportUrl.value,
          () => tempTablePropsExportName.value,
        ],
        (oldVal) => {
          emit('list', tableColumns.list)
          tableLoad.value = oldVal[0]
          tablists.value = oldVal[1]
          tableBordered.value = oldVal[2]
          tableStriped.value = oldVal[3]
          urls.value = oldVal[4]
          exportUrls.value = oldVal[5]
          exportNames.value = oldVal[6]
        }
      )
      return {
        rowKey,
        tableColumns,
        table,
        tablists,
        tableLoad,
        tableBordered,
        tableStriped,
        urls,
        exportUrls,
        cardList,
        paginations,
        cardLoading,
        visible,
        detail,
        cardListFn,
        exportExcelList,
        loadings,
        success,
        exportNames,
        scroll,
      }
    },
  })
</script>

<style lang="less" scoped></style>
